<template>
  <el-card class="box-card">
    <h2 class="titleHeader">
      动态列表
    </h2>
    <div class="status-menu" @click="handelChangeStatus($event)">
      <span class="active-status">全部</span>
      <span>公开</span>
      <span>私密</span>
    </div>

    <el-timeline>
      <el-timeline-item v-for="item in talkData"
        :timestamp="dayjs(parseInt(item.createTime)).format('YYYY-MM-DD HH:mm:ss')" placement="top">
        <el-card class="elCard">
          <div class="card">
            <div>
              <el-avatar :src="store.state.BaseUrl + store.state.globalAvatarUrl" :size="45" />
            </div>
            <div>
              <h4>
                <span>{{ item.username }}</span>
                <div>
                  <el-tag class="ml-2" :type="item.type == '0' ? '' : 'success'" effect="plain" size="small">{{
                    item.type == '0' ?
                      '私密' : '公开'
                  }}
                  </el-tag>
                  &ensp;
                  <el-popover ref="popoverRef" trigger="click" placement="bottom-end">
                    <template #reference>
                      <el-icon style="cursor: pointer;">
                        <MoreFilled />
                      </el-icon>
                    </template>
                    <div class='setPopover'>
                      <p @click="handleEditTalk(item)">
                        <el-icon>
                          <EditPen />
                        </el-icon>&ensp;
                        编辑动态
                      </p>
                      <p @click="removeTalkHandle(item)">
                        <el-icon>
                          <DeleteFilled />
                        </el-icon>&ensp;
                        删除动态
                      </p>
                    </div>
                  </el-popover>

                </div>
              </h4>
              <p>{{ item.talk }}</p>
            </div>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <div class="pagination">
      <el-pagination @current-change="handleChangePage" :hide-on-single-page="talkDataTotal < 5" :total="talkDataTotal"
        :page-size="5" layout="prev, pager, next" />
    </div>
    <el-empty description="暂无动态" v-if="!talkDataTotal" />
    <!-- 对话框 -->
    <el-dialog v-model="dialogVisible" title="提示" width="30%">
      <span>确定要删除这个说说</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleDialog">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>

</template>

<script lang="ts" setup>
import { getTalkData, removeTalk } from '@/utils/talkHttp'
import { ref, inject } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { MoreFilled, EditPen, DeleteFilled } from '@element-plus/icons-vue'
import dayjs from 'dayjs'

// 对话框
const dialogVisible = ref(false)
// 全局状态
const store: any = inject('store')
const currentPage = ref(1)
// 总数
const talkDataTotal = ref(0)
// 状态
const statusType = ref('')

const status = {
  open: '1',
  privacy: '0',
}
interface talkItem {
  _id: string,
  createTime: string,
  talk: string,
  type: string,
  username: string
}
// 列表数据 
const talkData = ref([] as talkItem[])
// 获取数据
function getTalkList(): void {
  getTalkData(currentPage.value, statusType.value).then(res => {
    talkDataTotal.value = res.data.info.num
    talkData.value = res.data.info.data
  }).catch(err =>
    ElMessage.error('服务器错误 token错误')
  )
}

// 分页切换
const handleChangePage = (page: number): void => {
  currentPage.value = page
  getTalkList()
}

// 切换状态
const handelChangeStatus = (e: any) => {
  if (e.target.nodeName !== 'SPAN' || e.target.classList.contains('active-status')) return;

  document.querySelector('.active-status')?.classList.remove('active-status')
  e.target.classList.add('active-status')

  if (e.target.innerHTML == '公开') {
    statusType.value = status.open
  } else if (e.target.innerHTML == '私密') {
    statusType.value = status.privacy
  } else {
    statusType.value = ''
  }
  getTalkList()

}

getTalkList()

// 删除动态
const talkID = ref('')
const removeTalkHandle = (item: talkItem) => {
  talkID.value = item._id
  dialogVisible.value = true
}
// 删除
const handleDialog = () => {
  if (!talkID.value) return;
  dialogVisible.value = false
  removeTalk(talkID.value).then(res => {
    if (res.data.ok) {
      getTalkList()
      ElMessage.success(res.data.info)
    } else {
      ElMessage.error(res.data.info)
    }
  }).catch(err => ElMessage.error('服务器错误'))
}

// 修改 跳转路由 
const router = useRouter()
const handleEditTalk = (item: talkItem) => {
  router.push(`/home/talk/talk-push?&id=${item._id}`)
}
</script>



<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: flex-end;
}

.setPopover {
  text-align: center;


  p {
    font-size: 14px;
    color: #606266;
    cursor: pointer;
    padding: 5px 0;
    font-weight: 700;
    letter-spacing: 2px;
    transition: all .2s;
  }

  P:hover {
    background-color: #ecf5ff;
    color: #66b1ff;
    letter-spacing: 3px;

  }
}

.elCard {

  border-radius: 10px;

  &:hover {
    box-shadow: 0 5px 10px 8px rgb(7 17 27 / 16%);
    transform: translateY(-3px);
  }

  .card {
    display: flex;

    >div:nth-child(2) {
      width: 100%;
      padding-left: 20px;

    }

    h4 {
      width: 100%;
      display: flex;
      font-size: 15px;
      font-weight: 700;
      justify-content: space-between;
    }

    p {
      color: #606266;
      margin-top: 20px;
      font-size: 14px;
      white-space: pre-line;
      word-wrap: break-word;
      word-break: break-all;
    }
  }

}

.status-menu {
  font-size: 14px;
  margin: 20px 0 30px 0;
  color: #999;
  padding-left: 20px;


  span {
    margin-right: 24px;
    cursor: pointer;
  }

  .active-status {
    color: #333;
    font-weight: 700;
  }
}
</style>